<template>
	<e-popup :show="showPop" mode="center" round="20">
		<view class="app-agreement-pop">
			<view class="app-agreement-pop__title e-flex-xy-center">
				<text class="c-333 w-600 e-font-36">{{title}}</text>
			</view>
			<view class="app-agreement-pop__content">
				<rich-text :nodes="content"></rich-text>
			</view>
			<view class="app-agreement-pop__footer e-flex">
				<view class="e-flex-1 app-agreement-pop__footer--cancel e-flex-xy-center" @tap="handleCancel">
					<text class="e-font-30">取消</text>
				</view>
				<view class="e-flex-1 app-agreement-pop__footer--confirm e-flex-xy-center" @tap="handleConfirm">
					<text v-if="countDown > 0" class="e-font-30" :style="{color:AppSkin.primary}">{{countDown}}S</text>
					<text v-else class="e-font-30" :style="{color:AppSkin.primary}">我已阅读并同意</text>
				</view>
			</view>
		</view>
	</e-popup>
</template>

<script setup>
	import { computed, watch,ref } from 'vue';
	import { storeToRefs } from 'pinia';
	import { useBasics } from '@/common/stores';
	import { richTextFilter } from '@/common/utils';
	import {
		useCurrentInstance
	} from '@/common/hooks'
	const ctx = useCurrentInstance()
	const props = defineProps({
		agreeId: String,
		isAgree:Boolean,
		showPop:Boolean
	});
	
	const basicsStore = useBasics();
	const { agreement } = storeToRefs(basicsStore);
	
	basicsStore.getBasicsSetting();
	
	const agreementItem = computed(() => agreement.value?.find?.((item) => item.id === Number(props.agreeId)));
	const content = computed(() => richTextFilter(agreementItem.value?.content));
	const title = computed(() => richTextFilter(agreementItem.value?.remark));
	
	const timer = ref(null)
	const countDown = ref(10)
	
	
	watch(()=>props.showPop,(val) => {
		if (val) {
			if (!props.isAgree.value) {
				countDown.value = 10
				setTimeout(() =>{
					handleCountDown()
				},500)
			}
		}
	},{immediate:true})
	watch(()=>props.showPop,(val)=>{
		if (!val) {
			clearTimer()
		}
	})
	
	const handleConfirm = () => {
		if (countDown.value === 0) {
			ctx.$emit('agree')
			clearTimer(timer.value)
			ctx.$emit('close')
		}
	}
	const handleCancel = () =>  {
		ctx.$emit('cancel')
		clearTimer(timer.value)
		ctx.$emit('close')
	}
	const handleCountDown = () =>  {
		if (countDown.value > 0) {
			countDown.value--
			timer.value = setTimeout(() =>{
				handleCountDown()
			},1000)
		} else {
			clearTimer()
		}
	}
	const clearTimer = () =>  {
		clearTimeout(timer.value)
		timer.value = null
	}
</script>

<style lang="scss" scoped>
	@include appBem_b(agreement-pop) {
		width: 80vw;
		
		background-color: white;
		border-radius: 20rpx;
		@include appBem_e(title) {
			width: 100%;
			height: 80rpx;
		}
		@include appBem_e(content) {
			max-height: 60vh;
			overflow: auto;
			padding: 30rpx;
		}
		@include appBem_e(footer) {
			height: 100rpx;
			border-top: 1rpx solid #ccc;
			@include appBem_m(cancel) {
				height: 100rpx;
				border-right: 1rpx solid #ccc;
				
			}
			@include appBem_m(confirm) {
				
				
			}
		}
	}
</style>